<template>
  <div class>
    <el-table :data="tableData" border style="width: 100%" size="mini">
      <el-table-column align="center" width="30" fixed>
        <template slot="header">
          <el-button
            class="el-icon-circle-plus"
            style="padding:0"
            type="text"
            @click.prevent="addRow()"
          ></el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            type="text"
            class="el-icon-remove"
            style="padding:0"
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column type="index" fixed width="50" label="序号"></el-table-column>
      <el-table-column label="股东名称" align="center" min-width="120" prop="name"></el-table-column>
      <el-table-column label="股东类型" align="center" min-width="120">
        <template slot-scope="scope">
          <div v-for="item in type" :key="item.value">
            <span v-if="item.value==scope.row.type">{{item.label}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="证件类型" align="center" min-width="120">
        <template slot-scope="scope">
          <div v-for="item in ide" :key="item.value">
            <span v-if="item.value==scope.row.ide">{{item.label}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="证件号码" align="center" min-width="150" prop="ideCard"></el-table-column>
      <el-table-column label="出资方式" align="center" min-width="120">
        <template slot-scope="scope">
          <div v-for="item in equityType" :key="item.value">
            <span v-if="item.value==scope.row.eqtType">{{item.label}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="出资日期"
        align="center"
        min-width="120"
        prop="eqtDate"
        type="date"
        :formatter="dateFormatter"
      ></el-table-column>
      <el-table-column label="认缴出资额(万元)" align="center" min-width="120" prop="eqtSumSub"></el-table-column>
      <el-table-column label="认缴比例(%)" align="center" min-width="120" prop="eqtRateSub"></el-table-column>
      <el-table-column label="实际出资额(万元)" align="center" min-width="120" prop="eqtSumRea"></el-table-column>
      <el-table-column label="实际比例(%)" align="center" min-width="120" prop="eqtRateRea"></el-table-column>
      <el-table-column label="备注" align="center" min-width="120" prop="remark"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="mini">查看</el-button>
          <el-button type="text" size="mini" @click="edit(scope.$index,scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="70%" :title="dialogTitle" :visible.sync="dialogFormVisible" >
      <el-form size="mini" inline :model="equity" :rules="rules" ref="equity" label-width="90px">
        <my-form-item label="股东名称" prop="name">
          <el-input v-model="equity.name" autocomplete="off" :disabled="equityDisabel"></el-input>
        </my-form-item>

        <my-form-item label="股东类型">
          <el-select
            v-model="equity.type"
            autocomplete="off"
            :disabled="equityDisabel"
            style="width: 200px;"
          >
            <el-option label="自然人" value="1"></el-option>
            <el-option label="企业" value="2"></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="证件类型">
          <el-select
            v-model="equity.ide"
            placeholder="请选择"
            :disabled="equityDisabel"
            style="width: 200px;"
          >
            <el-option
              v-for="item in ide"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </my-form-item>

        <my-form-item label="证件号码" prop="ideCard">
          <el-input
            v-model="equity.ideCard"
            autocomplete="off"
            :disabled="equityDisabel"
            style="width: 200px;"
          ></el-input>
        </my-form-item>

        <my-form-item label="出资方式" >
           <el-select
            v-model="equity.eqtType"
            style="width: 200px;"
            :disabled="equityDisabel"
            placeholder="请选择"
          >
            <el-option
              v-for="item in equityType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="出资日期">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="equity.eqtDate"
            :disabled="equityDisabel"
            style="width: 200px;"
          ></el-date-picker>
        </my-form-item>
        <my-form-item label="认缴出资额" prop="eqtSumSub">
          <el-input
            v-model="equity.eqtSumSub"
            autocomplete="off"
            :disabled="equityDisabel"
            style="width:200px;"
          > <template slot="append">万元</template></el-input>
        </my-form-item>
        <my-form-item label="认缴比例(%)" prop="eqtRateSub">
          <el-input
            v-model="equity.eqtRateSub"
            autocomplete="off"
            :disabled="equityDisabel"
            style="width:200px;"
          ></el-input>
        </my-form-item>
        <my-form-item label="实际出资额" prop="eqtSumRea">
          <el-input
            v-model="equity.eqtSumRea"
            autocomplete="off"
            :disabled="equityDisabel"
            style="width:200px;"
          ><template slot="append">万元</template></el-input>
        </my-form-item>
        <my-form-item label="实际比例(%)" prop="eqtRateRea">
          <el-input
            v-model="equity.eqtRateRea"
            autocomplete="off"
            :disabled="equityDisabel"
            style="width:200px;"
          ></el-input>
        </my-form-item>
        <el-row>
          <el-col>
          <my-form-item label="备注">
            <el-input
              v-model="equity.remark"
              type="textarea"
              autocomplete="off"
              style="width:800px;"
              :disabled="equityDisabel"
            ></el-input>
          </my-form-item>
           </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button :disabled="equityDisabel" type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  components: {},
  data() {
    return {
      equityEdit:false,//用于判断企业人员是否属于修改还是新增
      equityIndex:0,//记录企业人员信息修改行号
      dialogTitle:"新增股权信息",//表单标题
      dialogFormVisible:false,//表单显示控制
      equityDisabel:false,
      equity:{},
      tableData: [],
      ide: [{ "label": "居民身份证", "value": "1" },
      { "label": "护照", "value": "2" },
      { "label": "营业执照号", "value": "3" },
      { "label": "其他", "value": "4" },
      ],
      type:[
        { "label": "自然人", "value": "1" },
        { "label": "企业", "value": "2" },
      ],
      equityType:[
       { "label": "货币", "value": "1" },
      { "label": "实物", "value": "2" },
      { "label": "货币+实物", "value": "3" },
      { "label": "无形资产", "value": "4" },
      { "label": "土地使用权", "value": "5" },
      { "label": "劳务和信用出资", "value": "6" },
      ],
      rules: {
          name : [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          ideCard : [
            { required: true, message: '证件号码不能为空', trigger: 'blur' }
          ],
          eqtSumSub: [
            { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: '输入的认缴出资额不是数值' ,trigger: 'blur'}
          ],
           eqtSumRea: [
            { pattern: /(^[\-0-9][0-9]*(.[0-9]+)?)$/, message: '输入的实际出资额不是数值' ,trigger: 'blur'}
          ],
          eqtRateSub: [
            { pattern: /^\d+$/, message: '输入的认缴比例不是正整数' ,trigger: 'blur'}
          ],
          eqtRateRea: [
            { pattern: /^\d+$/, message: '输入的认缴比例不是正整数' ,trigger: 'blur'}
          ],
        }
    };
  },
  computed: {},
  mounted() {

  },
  methods: {
     //表单窗口取消操作
    cancle(){
      this.equity={};
      this.dialogFormVisible=false;
    },
    //修改企业人员信息
    edit(index,row){
      this.equity=row;
      this.equityEdit=true;
      this.equityIndex=index;
      this.dialogFormVisible=true;
      this.dialogTitle="修改股权信息";
      this.equityDisabel=false;
    },
    //查看企业人员明细信息
    handleClick(row){
      this.equity=row;
      this.dialogFormVisible=true;
      this.dialogTitle="股权信息明细";
      this.equityDisabel=true;
    },
    //新增企业人员表单确认
    handleAdd(){
        if(this.equityEdit){//判断是否属于修改，是修改先删除之前的数据再添加
          this.tableData.splice(this.equityIndex, 1);
          this.equityEdit=false;
        }
        this.tableData.unshift(this.equity);
        this.cancle();
    },
    //表格显示日期格式化
    dateFormatter(row, column, cellValue, index) {
      return this.formatDate(cellValue, "yyyy-MM-dd");
    },
    getData(entId){
      this.$api.formPost( '/api/biz/entEquity/doGetList',{
        entId
      }).then(res => {
        console.log(res)
            if(res.retHead.code=="0000000"){
                this.tableData = res.retBody.list;
            }else{
                this.$message({
                    type: 'error',
                    message: res.retHead.message
                });
            }
        });
    },
     doSave(id,path,name) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.$api
          .post("/api/biz/entEquity/doSubmit", { entEquityList: that.tableData,entId:id,applicationPath:path,componentName:name})
          .then(res => {
            if (res.retHead.code == "0000000") {
              // that.$message.success(res.retHead.message);
              resolve(res.retBody);
            } else {
              that.$message.error(res.retHead.message);
            }
          });
      });
    },
    // 增加行
    addRow() {
       this.dialogFormVisible=true;
        this.dialogTitle="新增股权信息";
        this.equity.type="1",
        this.equity.ide="1",
        this.equityDisabel=false;
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    }

  },
  created() { }
};
  </script>
  <style lang='scss' scoped>
</style>